<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import { busListStore } from '@/stores'
import { getBarcodeReservationDetailAPI, getPanicReservationBarcodeAPI, postOrderStatusAPI } from '@/api/code';
import type { KpcodeBarcodeDueEntity, PanicReservationBarcodeRequest } from '@/types/code';
const company = ref<KpcodeBarcodeDueEntity>()
const busStore = busListStore()
const query = defineProps<{
  id: string
}>()

const getBarcodeDetail = async () => {
  if (query.id) {
    const res = await getBarcodeReservationDetailAPI(query.id)
    company.value = res.data
  }
}

// 取消订单
const cancelOrder = async () => {
  const res = await postOrderStatusAPI({ id: query.id, status: '0' })
  uni.showToast({ icon: 'success', title: '取消订单成功' })
}
// 抢单
const form = ref<PanicReservationBarcodeRequest>({})
const getlOrder = async () => {
  form.value.id = query.id
  form.value.agentId = busStore.busList[0].id
  form.value.agentName = busStore.busList[0].name
  form.value.agentPhone = busStore.busList[0].contactsPhone
  const res = await getPanicReservationBarcodeAPI(form.value)
  console.log(res)
  uni.showToast({ icon: 'success', title: '抢单成功' })
}

// 送达
const doneOrder = async () => {
  const res = await postOrderStatusAPI({ id: query.id, status: '2' })
  console.log(res);
  uni.showToast({ icon: 'success', title: '订单配送成功' })
}

onLoad(() => {
  getBarcodeDetail()
})
</script>

<template>
  <view class="form">
    <view class="form-content" v-if="company">
      <view class="form-item">
        <text class="label">预约份数</text>
        <text class="info">{{ company.resNo }}</text>
      </view>
      <view class="form-item">
        <text class="label">每份数量</text>
        <text class="info">{{ company.eachNo }}</text>
      </view>
      <view class="form-item">
        <text class="label">乐促码类型</text>
        <text class="info">{{ company.resType }}</text>
      </view>
      <view class="form-item image_upload">
        <text class="label">预约公司</text>
        <text class="info">{{ company.busName }}</text>
      </view>
      <view class="form-item image_upload">
        <text class="label">预约电话</text>
        <text class="info">{{ company.resPhone }}</text>
      </view>
      <view class="form-item image_upload">
        <text class="label">配送地址</text>
        <text class="info">{{ company.areaAddress }}</text>
      </view>
      <view class="form-item">
        <text class="label">预约时间</text>
        <text class="info">{{ company.createTime }}</text>
      </view>
      <view class="form-item">
        <text class="label">配送状态</text>
        <view class="info">
          <view class="tag">{{
            company.status=='0'?'待接单':company.status=='1'?'待发货':company.status=='2'?'已发货':company.status=='3'?'商家取消':company.status=='4'?'抢单方取消':'已取消'}}</view>
        </view>
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="form-btn-content">
      <button class="form-button" v-if="company!.status == '0'" @tap="getlOrder">抢单</button>
      <button class="form-button" v-if="company!.status == '3'" disabled>已取消</button>
      <button class="form-button cancle" style=" width: 45%" v-if="company!.status == '1'" @tap="cancelOrder">取消订单</button>
      <button class="form-button" style=" width: 45%" v-if="company!.status == '1'" @tap="doneOrder">配送完成</button>
    </view>
  </view>
</template>

<style lang="scss">

// 表单
.form {
  background-color: #f4f4f4;
  padding-top: 10rpx;
  padding-bottom: 60rpx;
  height: 100vh;

  &-content {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }

  &-item {
    display: flex;
    height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;

    &:last-child {
      border: none;
    }

    .label {
      width: 180rpx;
      color: #333;
    }
    .tag {
      color: #27ba9b;
    }
  }
  .image_upload {
    height: auto;
  }
  &-button {
    height: 80rpx;
    width: 100%;
    text-align: center;
    line-height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: #27ba9b;
  }
}
.form-btn-content {
  display: flex;
  justify-content: space-between;
}
.cancle {
  color: #fff;
  background-color: #e43d33;
}
</style>
